<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿推荐页</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">

    <link href="css/zzsc.css" rel="stylesheet">
    <link href="css/maps.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/style.css">
    <script type="text/javascript" src="js/maps.js"></script>
    <script type="text/javascript" src="js/google.js"></script>
    <style>
        .theBtn :hover{
            background-color: #388bea;
        }
        .theBtn{
            width: 520px; background-color: #6ad8ff; border: 0px; padding: 5px 10px; color: white; border-radius: 10px; font-size: 1.5em; height: 50px; margin-top: 70px;
        }
    </style>
</head>
<body>
<style>
    a:hover{ text-decoration:underline;color: #FF5907; }
</style>

<div id="app">
    <ul   class="nav ">
        <li style="float: left;padding-left:320px " > <a style="font-size: 10px" href="#">会员权益</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">文本比较</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">在线代码</a></li>
        <li style="float: left;padding-left: 900px" ><a style="font-size: 10px" @click="location.href='./userUpdate.html'" >修改信息 </a>&nbsp;</li>
        <li style="float: left; padding-left: 10px" > <a style="font-size: 10px" href="#">| </a></li>
        <li style="float: left;padding-left: 10px" > <a style="font-size: 10px" @click="goOffline()">退出登录</a></li>



    </ul>
    <!-- 固定导航栏 -->
    <div class="container">
        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial';">志愿填报网</div></h1></div>
            <div class="col lg-4"></div>
        </div>
        <div class="content" >
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <ul class="venus-menu">
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                <li  ><a href="#"><i class="icon-home"></i> <a href="index.html" style="font-weight: bold; color: rgb(57, 83, 131);">
                    首页
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-search"></i><a href="universities.html">
                    院校查找
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-hand"></i> <a href="majors.html">
                    模拟填报
                </a></a>
                    <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-ios-star-half"></i><a href="#">
                    志愿推荐
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-podium"></i><a href="ranking.html">
                    大学排行
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-exit"></i><a href="http://localhost/" target="_blank" >
                    管理员入口
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>

                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
            </ul>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">

    </div>


    <div v-show="beforeRec">
        <div class="container">
            <div>

            <div>

                <div class="col-lg-10">
                    <table class="table table-borderd table-hover">
                        <thead>
                        <tr>
                            <th width="15%">姓名</th>
                            <th width="10%">高考分数</th>
                            <th width="15%">选科组合</th>
                            <th width="15%">高考地区</th>
                            <th width="15%">地区排名</th>
                            <th width="30%">考试类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{users.name}}</td>
                            <td>{{users.score}}</td>
                            <td>{{users.type}}</td>
                            <td>山东省</td>
                            <td>{{users.ranks}}</td>
                            <td>普通高等学校招生全国统一考试</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div>





        </div>

        <div class="container">
            <div > <span style="color: #00acee"> {{this.totals}} </span> 所推荐院校</div>
            <div class="row" style=" margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                <div >
                    <table>
                        <thead >
                        <tr>
                            <td>院校名称</td>
                            <td>院校地区</td>
                            <td>院校类型</td>
                            <td>院校等级</td>
                            <td>最低录取分数</td>

                        </tr>
                        </thead>
                        <tbody class="table table-borderd table-hover">
                        <tr v-for="college in collegess">
                            <td><span v-text="college.name"></span></td>
                            <td><span v-text="college.region"></span></td>
                            <td><span v-text="college.type"></span></td>
                            <td><span v-text="college.level"></span></td>
                            <td><span v-text="college.lowest"></span></td>
                            <td>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="next">
                        <!--大于1的时候可以点, 等于1的时候点了没效果-->
                        <a href="javascript:;" v-if="page>1" class="page" @click="findAll(page-1)">&lt;上一页</a>
                        <a href="javascript:;" v-if="page==1" class="page">&lt;上一页</a>
                        <a href="javascript:;" v-for="indexpage in totalPage" v-text="indexpage" @click="findAll(indexpage)"
                           style="margin-right: 5px"></a>
                        <!--小于最后一页的时候可以点, 在最后一页的时候点了没效果-->
                        <a href="javascript:;" v-if="page==totalPage" class="page">下一页&gt;</a>
                        <a href="javascript:;" v-if="page<totalPage" class="page" @click="findAll(page+1)">下一页&gt;</a>
                    </div>
                </div>
            </div>

        </div>




    </div>


    <div v-show="afterRec">

        <div class="container">
            <div>
            <span style="margin-bottom: 50px;margin-top: 50px; margin-left: 50px; font-size: 24px" class="yxtuijian2">
                系统为您生成的志愿推荐的结果
            </span>
            </div>
            <div class="row" style="background-color: white; margin:30px 50px; padding: 20px 5px; border-radius: 5px; " >
                <div class="col-lg-12">
                    <table class="table table-borderd table-hover">
                        <thead class="table table-borderd table-hover">
                        <tr>
                            <td>志愿号</td>
                            <td>院校名称</td>
                            <td>专业名称</td>
                            <td>专业选课要求</td>
                            <td>院校专业最低分</td>
                            <td>院校专业平均分</td>
                            <td>院校详情</td>
                        </tr>
                        </thead>
                        <tbody class="table table-borderd table-hover">
                        <tr v-for="(recommend,index) in recommended">
                            <td><span style="background-color: #FF7E00;padding: 1px 2px;
                                border-radius: 5px;color: white;">{{index+1}}</span></td>
                            <td><span v-text="recommend.college.name"></span></td>
                            <td><span v-text="recommend.collegeMajors.mname"></span></td>
                            <td><span v-text="recommend.collegeMajors.type"></span></td>
                            <td><span v-text="recommend.collegeMajors.lowest"></span></td>
                            <td><span v-text="recommend.collegeMajors.average"></span></td>
                            <td>
                                <a :href="'./majors/college.html?id='+recommend.college.id" class="tablebtn">查看详情</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>


    <!-- footer -->
    <div class="footer container">
        <div class="footertext">
            <div>联系电话: 123456789</div>
            <div>团队成员: 马秀坤 和理智 王贺 王乐斌 </div>
        </div>
    </div>

</div>

</body>
</html>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            users:{},
            type:"",
            region: [],
            types:[],
            selectedType:[],
            text:'',
            showGroup:false,
            colleges: [],
            selectedCollege:[],
            recommended:[],

            collegess:[],
            page:1,
            rows:9,
            totalPage:0,
            totals:0,

            beforeRec:true,
            afterRec:false
        },
        computed:{
            searchResult() {
                if (this.text!=='') {
                    return this.colleges.filter(
                        item =>
                            item.indexOf(this.text) > -1,
                        this.showGroup=true,
                    );
                } else {
                    this.showGroup=false
                    return this.colleges;
                }
            }
        },
        methods:{
            goOffline(){
                const storage = window.localStorage;
                storage.setItem("online","off");
                storage.setItem("userid",'');
                storage.setItem("role","user")
                alert("登出成功, 点击进入登陆页面")
                location.href='login.html';
            },
            test(){
                console.log(this.users.score.toString())    //分数
                console.log(this.users.type.toString())     //选课类型
                console.log(this.region.toString())         //意愿地区
                console.log(this.selectedType.toString())   //意愿专业类型
                console.log(this.selectedCollege.toString())//理想大学
            },
            findUserById(id){
                axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
                    console.log(res.data)
                    this.users = res.data;
                });
            },
            queryAllTypes(){
                axios.get("http://localhost:8080/majors/queryAllTypes").then((res)=>{
                    console.log(res.data)
                    this.types = res.data;
                });
            },
            queryAllCollegesName(){
                axios.get("http://localhost:8080/colleges/queryAllName").then((res)=>{
                    this.colleges = res.data;
                });
            },
            setSelectedCollege(item){
                this.selectedCollege = item;
                this.text = '';
            },
            doRecommend(){
                axios.get("http://localhost:8080/users/getRecommend?score="+this.users.score+
                    "&type="+this.users.type+"&aimRegion="+this.region+"&aimMajor="
                    +this.selectedType+"&aimCollege="+this.selectedCollege).then((res)=>{
                    this.recommended = res.data;
                    console.log(this.recommended)
                });
                this.beforeRec = false;
                this.afterRec = true;
            },


            findAll(indexpage){
                if(indexpage) this.page = indexpage;
                const _this = this;
                axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    _this.collegess = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            findByTags(){
                const _this = this;
                console.log("page="+this.page+"&rows="+this.rows)
                axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    console.log(location.href)
                    _this.collegess = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            if(0){
                window.location='login.html';
            }else {
                console.log(window.localStorage.getItem("userid").toString());
                this.findUserById(window.localStorage.getItem("userid").toString());
                this.queryAllTypes();
                this.queryAllCollegesName();
                this.findAll();
                this.beforeRec=true;
                this.afterRec=false;
            }
        }
    });
</script>
